import { useModel } from '@umijs/max';
import { Avatar, Descriptions, Modal, Tag } from 'antd';
import React from 'react';

const Info: React.FC<any> = ({ open, onClose }) => {
  const handleCancel = () => {
    onClose?.();
  };

  const { initialState } = useModel('@@initialState');

  const { info } = initialState || {};

  console.log('info', info);

  return (
    <>
      <Modal open={open} onCancel={handleCancel} width={600} footer={null}>
        <Descriptions
          title="个人信息"
          bordered
          items={[
            {
              key: '1',
              label: '用户名',
              children: (
                <>
                  <Avatar src={info?.avatar} /> {info?.user?.username}
                </>
              ),
              span: 3,
            },
            {
              key: '2',
              label: '邮箱',
              children: info?.email ?? '未知',
              span: 3,
            },
            {
              key: '3',
              label: '账号权限',
              children: +info?.is_superuser ? <Tag color='blue'>超级管理员</Tag> : <Tag>普通会员</Tag>,
              span: 3,
            },
            {
              key: '4',
              label: '注册时间',
              children: info?.user?.date_joined ?? '未知',
              span: 3,
            },
          ]}
        />
      </Modal>
    </>
  );
};

export default Info;
